<template>
  <div class="menu-main">
    <div class="top">
      <div
        :class="['part', 'thumb', index === activeName ? `sel` : `nosel`]"
        @click="clickItem(item, index)"
        v-for="(item, index) in menuList"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Menu } from "../../interface";

interface MenuProps {
  menuList?: Array<Menu>;
  defActiveName?: number;
}
const { defActiveName } = withDefaults(defineProps<MenuProps>(), {
  menuList: () => [],
  defActiveName: 0,
});

const activeName = ref<number>(defActiveName);

const emits = defineEmits<{
  (event: "itemChange", item: Menu): void;
}>();
const clickItem = (item: Menu, index: number) => {
  activeName.value = index;
  emits("itemChange", item);
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>
